
<template>
  <div>
    <el-row :gutter="element.options.gutter">
      <template v-for="(col, index) in element.items" :key="index">
        <el-col :span="col.options.span" :offset="col.options.offset">
          <div class="col-body">
            <template
              tag="div"
              v-for="(element, index) in col.items"
              :key="index"
            >
              <div v-if="element.key">
                <render-parse
                  :element="element"
                  :key="element.key"
                  :index="index"
                  :parent="col.items"
                >
                </render-parse>
              </div>
            </template>
          </div>
        </el-col>
      </template>
    </el-row>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, toRefs } from "vue";
export default defineComponent({
  name: "rowWidget",
  props: ["element"],
  setup(props) {
    const { element } = toRefs(props);
    return {
      element,
    };
  },
});
</script>

<style  scoped>
.drawing-board {
  min-height: 40px;
}
.drawing-board .cell-wrap {
  outline: 1px dashed #336699;
  padding-bottom: 10px;
}
.drawing-board .el-col {
  height: fit-content;
}
.drawing-board .cell-wrap.active {
  outline: 2px solid #bb40ff;
}
</style>
